<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="head"></div>
    <!-- DataTables -->
    <link rel="stylesheet" href="../plugins/datepicker/datepicker3.css"/>
    <link rel="stylesheet" href="../plugins/datatables/dataTables.bootstrap.css"/>
    <title>订单管理</title>
</head>

<body class="hold-transition skin-blue sidebar-mini ">
<div class="wrapper">

    <div th:replace="header"></div>
    <div th:replace="sidebar"></div>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                订单列表
                            </div>
                            <form class="form-horizontal" action="/order" method="get">
                                <div class="col-lg-12 input-group panel-body">
                                    <div class="form-group col-lg-4">
                                        <label class="col-sm-3 control-label">订单编号</label>
                                        <div class="col-sm-9">
                                            <input type="text" name="orderId" th:value="${query.orderId} ? ${query.orderId}"
                                                   class="form-control" placeholder="订单编号" maxlength="30"/>
                                        </div>
                                    </div>
                                    <div class="form-group col-lg-4">
                                        <label class="col-sm-3 control-label">演出名称</label>
                                        <div class="col-sm-9">
                                            <input type="text" name="playName" th:value="${query.playName} ? ${query.playName}"
                                                   class="form-control" placeholder="演出名称" maxlength="30"/>
                                        </div>
                                    </div>
                                   <!-- <div class="form-group col-lg-4">
                                        <label class="col-sm-3 control-label">买家名称</label>
                                        <div class="col-sm-9">
                                            <input type="text" name="nickName" th:value="${query.nickName} ? ${query.nickName}"
                                                   class="form-control" placeholder="买家名称" maxlength="30"/>
                                        </div>
                                    </div>-->
                                    <div class="form-group col-lg-4">
                                        <label class="col-sm-3 control-label">订单状态</label>
                                        <div class="col-sm-9">
                                            <select class="col-sm-3 form-control" name="status">
                                                <option value="">全部</option>
                                                <option value="INIT">待付款</option>
                                                <option value="PAID">已付款</option>
                                                <option value="VERIFIED">已出票</option>
                                                <option value="CANCEL">已取消</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-lg-6">
                                        <label class="col-sm-3 control-label">下单时间</label>
                                        <div class="col-sm-4">
                                            <input type="text" name="startTime"
                                                   th:value="${query.startTime}? ${#dates.format(query.startTime, 'yyyy-MM-dd')}"
                                                   class="form-control dateTimeRange" placeholder="开始时间" maxlength="30"/>
                                        </div>
                                        <label class="col-sm-1 control-label">至</label>
                                        <div class="col-sm-4">
                                            <input type="text" name="endTime"
                                                   th:value="${query.endTime}? ${#dates.format(query.endTime, 'yyyy-MM-dd')}"
                                                   class="form-control dateTimeRange" placeholder="结束时间" maxlength="30"/>
                                        </div>

                                    </div>
                                    <div class="form-group col-lg-2">
                                        <button class="btn btn-default" type="submit"
                                                onclick="search();">筛选
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="box-body">
                            <table id="dataTable" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>订单编号</th>
                                    <th>演出名称</th>
                                    <th>数量</th>
                                    <th>买家</th>
                                    <th>下单状态</th>
                                    <th>下单时间</th>
                                    <th>付款金额</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="item:${list}">
                                    <td th:text="${item.orderId}"></td>
                                    <td th:text="${item.playName}"></td>
                                    <td th:text="${item.quantity}"></td>
                                    <td th:text="${item.name}"></td>
                                    <td th:text="${item.status}"></td>
                                    <td th:text="${#dates.format(item.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                    <td th:text="${item.payAmount}"></td>
                                    <td style="text-align: center">
                                        <a th:href="@{/order/detail(id=${item.id})}" class="center-block">
                                            <span class="glyphicon glyphicon-eye-open" title="详情"></span>
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
</div>

<div th:replace="script"></div>

<!-- page script -->
<script>
    $(function () {
        $('#dataTable').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": true,
            "autoWidth": false
        });
        $(".dateTimeRange").datepicker({
            language: "zh-CN",
            autoclose: true,//选中之后自动隐藏日期选择框
            clearBtn: true,//清除按钮
            todayBtn: 'linked',//今日按钮
            format: "yyyy-mm-dd"
        });
    });

</script>
<script th:src="@{/js/list-page.js}"></script>
<script th:src="@{/plugins/datepicker/bootstrap-datepicker.js}"></script>
<script th:src="@{/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js}"></script>
</body>
</html>